<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <title>补借条详情</title>
    <link href="../Content/css/style.css" rel="stylesheet">
    <style>
        .loan-detail-money__item  span.persent{
            font-size: 16px;
        }
        .loan-detail-number__number {
            width: 60%;
        }
        .component-confirm .component-confirm__title {
            font-size: 21px;
            font-weight: 400;
            line-height: 32px;
        }
        .component-confirm .component-confirm__title {
            color: rgba(0,0,0,.87);
            padding-bottom: 16px;
        }
        .component-confirm .component-confirm__tips {
            font-size: 14px;
            font-weight: 300;
            line-height: 23px;
        }
        .component-confirm .component-confirm__buttons {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
            -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            text-align: center;
            padding-top: 24px;
        }
        .button.pure {
            border: none;
            box-shadow: none;
            background: none;
            color: #28cad6;
        }
        .component-confirm .component-confirm__buttons .short {
            width: auto;
            min-width: 65px;
            margin-left: 8px;
        }
        .component-confirm .component-confirm__buttons .short:first-child {
            margin-left: 0;
        }
    </style>
</head>
<body>
<div id="loading">
    <img src="../Content/imgs/kbloading.gif">
</div>
<div class="loan-iou-detail router">
    <div class="wrapper">

       </div>
<footer class="footer-button dn js-1"> <span class="button transparent" onclick="del()">删除借条</span> <span class="button" id="fsdf">发送给对方</span></footer>
    <!--<footer class="footer-button js-2"> <span class="button transparent" onclick="del()">查看详细</span></footer>-->
    <footer class="footer-button dn js-2"> <span class="button" id="qrjt" onclick="qrjt()">确认借条</span></footer>
    <footer class="footer-button dn js-3"> <span class="button" id="qrsk" onclick="show()">收到还款,完结借条</span></footer>

    <div class="component-modal component-confirm" id="qdbox" style="display: none;">
    <div class="component-modal__mask"></div>
    <div class="component-modal__container" style="width: 92%;"><!----> <!---->
        <div class="component-modal__main"><h1 class="component-confirm__title"> 确认收到还款 </h1>
            <p class="component-confirm__tips"> 请确认已收到还款，如未收到还款，切勿点击完成借条，谨防诈骗。 </p>
            <div class="component-confirm__content"></div>
            <footer class="component-confirm__buttons"><span
                class="component-confirm__button button short pure" onclick="hide(this)">取消</span> <span
                class="component-confirm__button button short pure" onclick="qrsk()">确定</span></footer>
        </div>
    </div> <!----></div>
<div class="component-modal component-confirm dn" id="scjt">
    <div class="component-modal__mask"></div>
    <div class="component-modal__container" style="width: 92%;">
        <div class="component-modal__main"><h1 class="component-confirm__title"> 确认删除借条 </h1>
            <p class="component-confirm__tips"> 借条删除后，相关记录一并清除，借条不会生效，是否确认删除？ </p>
            <div class="component-confirm__content"></div>
            <footer class="component-confirm__buttons"><span
                class="component-confirm__button button short pure" onclick="hide(this)">取消</span> <span
                class="component-confirm__button button short pure" onclick="deljt()">确定</span></footer>
        </div>
    </div> <!----></div>
<div class="component-modal component-confirm" style="display: none;">
    <div class="component-modal__mask"></div>
    <div class="component-modal__container" style="width: 92%;">
        <div class="component-modal__main"><h1 class="component-confirm__title"> 确认退回借条 </h1>
            <p class="component-confirm__tips"> 是否确认退回借条 </p>
            <div class="component-confirm__content"></div>
            <footer class="component-confirm__buttons"><span
                class="component-confirm__button button short pure">取消</span> <span
                class="component-confirm__button button short pure">确定</span></footer>
        </div>
    </div></div>
</div>
<div class="component-share dn" ><img width="240" src="../Content/imgs/sharetip@3x.png"></div>
<script src="../Content/js/jquery-2.2.4.min.js"></script>
<script src="../Content/js/layer-mobl.js"></script>
<script>
    //获取页面传递参数
    let urs=window.location.search;
    let strs=urs.substring(1);
    let silp=strs.split('&');
    let res={};
    for (let i=0;i<silp.length;i++){
        res[silp[i].split("=")[0]]=silp[i].split("=")[1];
    }
    console.log(res)
    var winH=$(window).height();
    $(".wrap").css("height",winH);
    $.ajax({
        type : "GET",
        url : localStorage.url+"/receipt/getReceiptByid",
        data :{
            id:res.id
        },
        success : function(ro) {
            console.log(ro);
            var strs="";
            strs=`<div class="loan-detail-main" style="margin-top: 0;color:#898989">
                        <div class="loan-detail-number"><p class="loan-detail-number__number">编号:`+ro.receipt_id+`</p> <span
                            class="loan-detail-number__status orange">`+wz(ro.status)+`</span></div>
                        <div class="loan-detail-money">
                            <div class="iou-detail-people"><p class="iou-detail-people__item">出借人： <span>`+ro.luser_name+`</span></p>
                                <p class="iou-detail-people__item">求借人： <span>`+ro.buser_name+`</span></p></div>
                            <ul class="loan-detail-money__list">
                                <li class="loan-detail-money__item"><span class="persent">`+Number(ro.loan_money).toFixed(2)+`</span>
                                    <p>借款总额(元)</p></li>
                                <li class="loan-detail-money__item"><span class="persent">`+Number(ro.rate*100).toFixed(0)+`%</span>
                                    <p>年利率</p></li>
                                <li class="loan-detail-money__item"><span class="persent">`+ro.duration+`</span>
                                    <p>借款时长(天)</p></li>
                            </ul>
                        </div>
                        <div class="loan-detail-info">
                            <ul class="card__info">
                                <li class="card__info-item">借款日期：`+ro.loan_date+`</li>
                                <li class="card__info-item">还款日期：`+ro.refund_date+`</li>
                                <li class="card__info-item">生成日期：`+ro.apply_time+`</li>
                                <li class="card__info-item">借款用途：`+ro.use+`</li>
                            </ul>
                        </div>
                    </div>`;
            $(strs).appendTo(".wrapper");
            if(ro.status=="1"){
                if(localStorage.id==ro.luser_id ||localStorage.id==ro.buser_id ){
                    $(".js-1").css("display","flex");
                }else {
                    $.ajax({
                        type : "GET",
                        url : localStorage.url+"/me/getMeMap",//查询对方的名字和本地的名字一样否 显示确认借条按钮
                        data :{
                            id:localStorage.id
                        },
                        success : function(ro2) {
                            console.log(ro2);
                            if(ro2.name==ro.luser_name || ro2.name==ro.buser_name){
                                $(".js-2").css("display","flex");
                            }
                        },
                        error : function(err) {
                            alert(err);
                        }
                    });
                }
            }else if(ro.status=="2"){
                if(localStorage.id==ro.luser_id){
                    $(".js-3").css("display","flex");
                }
            }
            $("#loading").hide();

        },
        error : function(err) {
            alert(err);
        }
    });
    function wz(s) {
        if(s=="1"){
            return "等待确认"
        }else if(s=="2"){
            return "已确认"
        }else if(s=="3"){
            return "已完成"
        }
    }
    $(function(){
            $(".qrfbbtn").on('click',function () {
                window.location.href="BankCard-2.html"
            });
            $("#fsdf").on("click",function () {
                $(".component-share").show()
            })
            $(".component-share").on('click',function () {
                $(this).hide();
            })
    });
    function del() {
        $("#scjt").show();
    }
    function deljt() {
        $.ajax({
            type : "GET",
            url : localStorage.url+"/receipt/delReceipt",
            data :{
                id:res.id
            },
            success : function(ro) {
                console.log(ro);
                if(ro.data=="1"){
                    layer.open({
                        content:"删除借条成功!",
                        time:2
                    });
                    setTimeout(function () {
                        history.go(-1)
                    },1000)
                }else {
                    layer.open({
                        content:"网络错误,稍后重试!",
                        time:1
                    });
                }
            },
            error : function(err) {
                alert(err);
            }
        });
    }
    function hide(obj) {
        var _this=$(obj);
        _this.parents(".component-modal").hide();
    }

    function qrjt() {
        $.ajax({
            type : "GET",
            url : localStorage.url+"/receipt/updateStauts",
            data :{
                id:res.id,
                userid:localStorage.id
            },
            success : function(ro) {
                console.log(ro);
            },
            error : function(err) {
                alert(err);
            }
        });
    }
    function show() {
        $("#qdbox").show();
    }
    function qrsk() {
        //receipt/updateStautsRefund
        $.ajax({
            type : "GET",
            url : localStorage.url+"/receipt/updateStautsRefund",
            data :{
                id:res.id,
            },
            success : function(ro) {
                console.log(ro);
                if(ro.data=="1"){
                    location.reload();
                }
            },
            error : function(err) {
                alert(err);
            }
        });
    }
</script>
</body>
</html>
